import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';

const LindeChart = ({ cardTitle }) => {
  const data = [
    {
      year: '1',
      value: 1.1,
    },
    {
      year: '2',
      value: 1.2,
    },
    {
      year: '3',
      value: 1,
    },
    {
      year: '4',
      value: 0.8,
    },
    {
      year: '5',
      value: 0.9,
    },
    {
      year: '6',
      value: 1.1,
    },
    {
      year: '7',
      value: 0.8,
    },
    {
      year: '8',
      value: 1.3,
    },
    {
      year: '9',
      value: 0.9,
    },
    {
      year: '10',
      value: 0.8,
    },
    {
      year: '11',
      value: 1.3,
    },
    {
      year: '12',
      value: 0.9,
    },
  ];
  const config = {
    data,
    xField: 'year',
    yField: 'value',
    label: {},
    point: {
      size: 5,
      shape: 'diamond',
      style: {
        fill: 'white',
        stroke: '#5B8FF9',
        lineWidth: 2,
      },
    },
    tooltip: {
      showMarkers: false,
    },
    state: {
      active: {
        style: {
          shadowBlur: 4,
          stroke: '#000',
          fill: 'red',
        },
      },
    },
    interactions: [
      {
        type: 'marker-active',
      },
    ],
  };
  return <Line {...config} />;
};

export default LindeChart